<template>
  <div>
    <table width=800  border=1>
            <caption>欢迎光临_vue开发的收银系统_水果店</caption>
            <tr>
                <th>苹果10 ¥ / 斤, 折扣 &lt; 8折 &gt;</th>
            </tr>
            <tr>
                <td>
                    请输入你要购买的斤数 <input type="number" v-model.number="count"  placeholder="斤数">
                </td>
            </tr>
            <tr>
                <td>
                  
                    <button @click="add">结账买单</button>
                </td>
            </tr>
            <tr>
                <td>
                    结账单:
                    总价: <span>{{ allPrice }}</span> ¥元
                    折后价: <span>{{ disPrice }} </span>¥元
                   省了:  <span>{{ savePrice }}</span> ¥元
                </td>
            </tr>
        </table>
  </div>
</template>

<script>
export default {
  data(){
    return {
      count: 0, // 购买的斤数
      allPrice: 0, // 总价
      disPrice: 0, // 折后价格
      savePrice: 0, // 省了多钱
    }
  },
  methods: {
    add(){
    
      this.allPrice = 10 * this.count;
      this.disPrice = this.allPrice * 8;
      this.savePrice = this.allPrice - this.disPrice;
    }
  }
}
</script>
	table {
		text-align: center;
		margin: 10px auto;
	}
	span {
		color:red
		}
<style>
	
</style>